<template >
<div>
 <section id="projects" class="projects-section">
                    <div class="projects-grid">
 
            <router-link to="/css" target="_blank" class="project project-tile"> 
                <img class="project-image" src="../../../assets/logos/css.png" alt="css">
                <div class="work-doc">
                        <p class="project-title">学习实践HTML/CSS/JS</p>
                </div>
            </router-link>
            <router-link to="/vue" target="_blank" class="project project-tile"> 
                <img class="project-image" src="../../../assets/logos/vue.png" alt="css">
                <div class="work-doc">
                        <p class="project-title">学习实践Vue</p>
                </div>
            </router-link>
            <a href="https://github.com/aturX/100DD100/tree/master/day049" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Java</p>
                </div>
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Go</p>
                </div>         
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Vue</p>
                </div>         
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Blockchain</p>
                </div>         
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Dapp</p>
                </div>         
            </a>
                        <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">Defi</p>
                </div>         
            </a>
        </div>
</section>
</div>
  
</template>
<script>
  

export default {
    name: 'Content',
    components: {
  }
}
</script>


<style>
.projects-section {
    text-align: center;
    padding: 5rem 2rem;
    background: #45567d;
}

.projects-section-header {
    max-width: 640px;
    margin: 0 auto 4rem auto;
    border-bottom: 0.2rem solid white;
}

.see-more:hover {
    font-size: 2rem;
}

/* 第二部分： 作品界面 */
 
 
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 2fr));
    grid-gap: 1rem;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 2rem;
}


.project {
    background: #303846;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}
 
.project-title {
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
}

:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

.project-image {
    display: block;
    height: calc(100% - 2rem);
    width: 100%;
    object-fit: cover;
}


.work-doc:hover {
    /* 鼠标悬浮变色效果 */
    background-color: #303F9F;
    color: yellow; 
}

</style>
